<template>
    <el-container :style="height">
        <el-aside :style="menuheight" style="background-color: #004444;overflow: hidden;">
            <div class="aside-title">{{title}}</div>
            <div :style="mainheight" style="overflow-x: hidden;color: white;">
                <el-scrollbar>
                    <el-menu :uniqueOpened="true" class="el-menu-vertical-demo" background-color="#004444" text-color="#fff"
                        @click="selectmenu" @select="selectmenu" router active-text-color="#ffd04b" :default-active="activeItemIndex"
                        style="border-right: 0px;" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                        :collapse-transition="false">

                        <el-submenu v-for="(value, key) in menu" v-bind:key="key" :index="value.id">
                            <template #title>
                                <i :class="value.icon"></i>
                                <span>{{value.name}}</span>
                            </template>
                            <el-menu-item v-for="(valuei, keyi) in value.children" v-bind:key="keyi" :index="valuei.id"
                                :route="valuei.route"><i :class="valuei.icon"></i>{{valuei.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-scrollbar>
            </div>
        </el-aside>
        <el-container>
            <el-header class="header" style="font-size: 12px;height: 3.125rem;">
                <div>
                    <i @click="changemenu" :class="isCollapse==true?'el-icon-s-unfold':'el-icon-s-fold'" style="font-size: 1rem;"></i>
                </div>
                <div style="display: flex;align-items: center;">

                    <!--          <img  style="height: 30px;width: 30px; border-radius: 30px;margin-right: 0.3125rem;" src="assets/logo.png"/>
 -->
                    <el-tooltip class="item" effect="dark" :content="isfullscreen?'还原':'最大化'" placement="bottom">
                        <i @click="maxwindow" class="el-icon-full-screen" style="
               font-size: 16px;
               margin-right: 10px;
           "></i>
                    </el-tooltip>

                    <el-dropdown @command="loginout">
                        {{loginname+"("+logingroup+")"}}<i class="el-icon-arrow-down el-icon--right"></i>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>我的待办
                                    <el-badge class="mark" :value="12" type="warning" />
                                </el-dropdown-item>
                                <el-dropdown-item>个人资料</el-dropdown-item>
                                <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main :style="mainheight" style="background-color:rgb(236 236 236 / 45%);width: 100%;">
                <div class="main-content">
                    <router-view></router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
    <el-dialog title="提示" v-model="centerDialogVisible" width="20%" center>
        <span>你确定要退出登录吗</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogconfirm">确 定</el-button>
            </span>
        </template>

    </el-dialog>
</template>

<style>
    #app {
        font-family: 微软雅黑 !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin: 0;
    }

    body {
        margin: 0;
        font-family: "PingFang SC";
    }

    a {
        color: white;
        text-decoration: none;
    }

    a:hover {
        color: #ffd04b;
    }

    #nav {
        padding: 30px;
    }

    #nav a {
        font-weight: bold;
        color: #2c3e50;
    }

    .el-main {
        padding: 0px !important;
    }

    #nav a.router-link-exact-active {
        color: #42b983;
    }

    /*滚动条整体部分,必须要设置*/
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: #fff;
    }

    /*滚动条的轨道*/
    ::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 20px;
    }

    /*滚动条的滑块按钮*/
    ::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background-color: #004444;
        box-shadow: inset 0 0 5px #004444;
    }

    /*滚动条的上下两端的按钮*/
    ::-webkit-scrollbar-button {
        height: 0px;
        background-color: white;
    }

    .header {
        background-color: white;
        color: black;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        box-shadow: 0px -3px 5px rgb(0 0 0 / 80%);
        z-index: 1;
    }

    .aside-title {
        height: 3.125rem;
        line-height: 3.125rem;
        text-align: center;
        background-color: #004444;
        color: white;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        overflow: hidden;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
        color: white;
    }

    .el-row {
        /* 	padding-left: 20px!important;
	padding-right: 20px!important; */
        margin: 0px !important;
    }

    .main-content {
        margin: 10px;
        width: calc(100% - 50px);
        background: white;
        padding: 0.9375rem;
        border-radius: 0.3rem;
        box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
    }

    .el-breadcrumb {
        height: 30px;
        border-bottom: 1px solid #f2f2f2;
    }
</style>
<script>
    const axios = require('axios');
    export default {
        name: "index",
        data() {
            var height = document.documentElement.clientHeight;
            return {
                title: "这是一个大标题",
                height: "height:" + height + "px",
                mainheight: "height:" + (height - 100) + "px",
                isCollapse: false,
                menuheight: "width:201px;",
                activeItem: "测试",
                activeItemIndex: "1-1",
                isfullscreen: false,
                login: false,
                centerDialogVisible: false,
                dialogType: "",
                menu: [{
                    id: 1,
                    name: "test",
                    icon: "icon"
                }],
                loginname:"",
                logingroup:""
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            changemenu() {
                if (this.isCollapse) {
                    this.isCollapse = false
                    this.menuheight = "width:201px;"
                } else {
                    this.isCollapse = true
                    var width = document.documentElement.clientWidth;
                    if (width < 400) {
                        this.menuheight = "width:0px;"
                    } else {
                        this.menuheight = "width:65px;"
                    }
                }
            },
            /**
             * 最大/还原窗口
             */
            maxwindow() {
                if (this.$data.isfullscreen) {
                    this.$data.isfullscreen = false
                    document.exitFullscreen()
                    return
                }
                this.$data.isfullscreen = true
                var box = document.documentElement
                if (box.requestFullscreen) {
                    box.requestFullscreen()
                } else if (box.webkitRequestFullscreen) {
                    //谷歌浏览器
                    box.webkitRequestFullscreen()
                } else if (box.mozRequestFullScreen) {
                    //火狐浏览器
                    box.mozRequestFullScreen()
                } else if (box.msRequestFullscreen) {
                    //IE浏览器
                    box.msRequestFullscreen()
                } else {
                    alert('你的浏览器版本太低！')
                }
            },
            /**
             * 退出登录
             */
            loginout() {
                this.$confirm('你确定要退出登陆吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that = this
                    var url = "http://localhost:8081/user/loginout"
                    axios
                        .get(url)
                        .then(
                            function(res) {
                                console.log(res.data)
                                if (res.data.resultmsg.code == 200) {
                                    that.$message.success({
                                        message: res.data.resultmsg.msg,
                                        type: 'success',
                                        duration: 1000,
                                        center: true
                                    });
                                    var login = {
                                        islogin: false,
                                        token: '',
                                        time: ''
                                    }
                                    // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
                                    localStorage.setItem('login', JSON.stringify(login));
                                    that.$data.centerDialogVisible = false
                                    that.$router.push({
                                        name: 'Login'
                                    })
                                }else if (res.data.resultmsg.code == 400001) {
                                    that.$message.error({
                                        message: res.data.resultmsg.msg,
                                        type: 'error',
                                        duration: 2000,
                                        center: true
                                    });
                                } else if (res.data.resultmsg.code == 400002) {
                                    localStorage.removeItem("login")
                                    that.$data.login = false
                                    that.$router.push({
                                        name: 'Login'
                                    })
                                }
                            }
                        )
                        .catch(function(error) { // 请求失败处理
                            console.log(error);
                        });
                })
            },
            /**
             * 弹出框确认事件
             */
            dialogconfirm() {
                var that = this
                switch (this.$data.dialogType) {
                    case "loginout":
                        var url = "http://localhost:8081/user/loginout"
                        axios
                            .get(url)
                            .then(
                                function(res) {
                                    console.log(res.data)
                                    if (res.data.resultmsg.code == 200) {
                                        that.$message.success({
                                            message: res.data.resultmsg.msg,
                                            type: 'success',
                                            duration: 1000,
                                            center: true
                                        });
                                        var login = {
                                            islogin: false,
                                            token: '',
                                            time: ''
                                        }
                                        // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
                                        localStorage.setItem('login', JSON.stringify(login));
                                        that.$data.centerDialogVisible = false
                                        that.$router.push({
                                            name: 'Login'
                                        })
                                    } else if (res.data.resultmsg.code == 400002) {
                                        localStorage.removeItem("login")
                                        that.$data.login = false
                                        that.$router.push({
                                            name: 'Login'
                                        })
                                    }else if (res.data.resultmsg.code == 400001) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 2000,
                                            center: true
                                        });
                                    } 
                                }
                            )
                            .catch(function(error) { // 请求失败处理
                                console.log(error);
                            });
                        break;
                    default:
                        break;
                }
            }
        },
        mounted() {
            if(localStorage.getItem("login")!=null){
                var loginmsg = JSON.parse(localStorage.getItem("login")).loginmsg;
                this.loginname = loginmsg.name
                this.logingroup = loginmsg.group
            }else{
                this.$router.push({
                    "name":"Login"
                })
            }
            const that = this
            //监听窗口变化事件
            window.onresize = () => {
                return (() => {
                    var height = document.documentElement.clientHeight;
                    var width = document.documentElement.clientWidth;
                    that.height = "height:" + height + "px";
                    that.mainheight = "height:" + (height - 100) + "px";
                    if (width < 400) {
                        this.menuheight = "width:0px;"
                    }
                })()
            }
            //路由拦截事件
            that.$router.beforeEach((to, from, next) => {
                console.log(to)
                if (to.matched.length === 0) { //匹配前往的路由不存在
                   next({
                       name: 'Notfoud'
                   })
                }
                if (localStorage.getItem("login") == null) {
                    this.$data.login = false
                } else {
                    var time = new Date().getTime();
                    var logintime = JSON.parse(localStorage.getItem("login")).time;
                    //前端判断登录是否过期
                    if ((time / 1000 - logintime / 1000) > 1800) {
                        localStorage.removeItem("login")
                        this.$data.login = false
                    } else {
                        var login = JSON.parse(localStorage.getItem("login"))
                        login.time = new Date().getTime()
                        localStorage.setItem("login", JSON.stringify(login))
                        this.$data.login = JSON.parse(localStorage.getItem("login")).islogin
                    }
                }
                if (to.name !== 'Login' && !this.$data.login) next({
                    name: 'Login'
                })
                else {
                    if (to.name == 'Login' && this.$data.login) {
                        next({
                            name: 'Home'
                        })
                    }
                    next()
                }
            })
            var url = "http://localhost:8081/manage/menu/getmenu?id=0&type=0"
            axios
                .get(url)
                .then(
                    function(res) {
                        // console.log(res.data)
                        if (res.data.resultmsg.code == 200) {
                            that.$data.menu = res.data.resultmsg.data
                            // console.log(that.$data.menu)
                        }else if (res.data.resultmsg.code == 400001) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 2000,
                                            center: true
                                        });
                                    }  else if (res.data.resultmsg.code == 400002) {
                            that.$message.error({
                                message: res.data.resultmsg.msg,
                                type: 'error',
                                duration: 1000,
                                center: true
                            });
                            that.$router.push({
                                name: 'Login'
                            })
                        }
                    }
                )
                .catch(function() { // 请求失败处理
                    that.$message({
                        type: 'error',
                        message: '網絡請求失敗!',
                        center: true
                    });
                });
        }
    };
</script>
